import React, {Component} from 'react';
import {ActivityIndicator, Image, StyleSheet, Text, TouchableOpacity, View, WebView} from 'react-native';

export default class Details extends Component {
  static navigationOptions = {
    headerBackTitle: null,
    header:null,
    headerTintColor: '#333333',
    gesturesEnabled:true
  };
  constructor(props) {
    super(props)
  }
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.top_view}>
          <TouchableOpacity onPress={() => {
              this.props.navigation.pop();
            }}>
              <Image resizeMode={'contain'} source={{ uri: 'back' }} style={{ height: 25, width: 20,paddingTop:10,paddingBottom:10}} />
              </TouchableOpacity>
            <Text style={{ flex: 1, textAlign: 'center', fontSize: 18, fontWeight: 'bold', fontFamily: 'scratchmyback', color: '#000' }}>{params.name}</Text>
            <View style={{ height: 20, width: 15,paddingTop:5,paddingBottom:5}} />
        </View>
        <View style={styles.container}>
          <WebView
            source={{ uri: params.url }}
            style={styles.container}
            renderLoading={() => {
              return <View>
                 <ActivityIndicator
                  animating={true}
                  color='red'
                  size="large"
                />
              </View>
            }}
          />
          <TouchableOpacity onPress={()=>{
            alert('评论个鸡毛，暂时不会做');
          }}>
            <Text style={styles.commentText}>我要评论</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  tabText: {
    color: '#999999',
    fontSize: 10
  },
  selectedTabText: {
    color: '#AC1E1A'
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  icon: {
    width: 20,
    height: 20
  },
  top_view:{
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight:10,
    paddingBottom:12,
    paddingTop:12,
    alignItems:'center',
    backgroundColor:'#fff',
    elevation:2
  },
  commentText:{
    padding:12,
    color:'#4e4e4e',
    textAlign:'center'
  }
});
